import { CloseOutlined } from '@ant-design/icons';
import { Button, Descriptions, Drawer, Spin } from 'antd';

import hooks from '../../hooks';

export default () => {
  const {
    detailHooks: { open, onClose, detailReq },
  } = hooks.useContainer();
  const data = detailReq.data?.data;
  return (
    <Drawer
      title="用户详情"
      width={600}
      destroyOnClose
      open={open}
      footer={<Button onClick={onClose}>关闭</Button>}
      extra={<CloseOutlined onClick={onClose} />}
      closable={false}
      onClose={onClose}
    >
      {data ? (
        <>
          <Descriptions title="用户信息" layout="horizontal" column={1}>
            <Descriptions.Item label="姓名" style={{ width: '4rem' }}>
              {data?.userName}
            </Descriptions.Item>
            <Descriptions.Item label="手机号码">{data?.mobile}</Descriptions.Item>
            <Descriptions.Item label="所属部门" contentStyle={{ whiteSpace: 'pre-wrap' }}>
              {data?.deptNamePathList?.join('\n') ?? '-'}
            </Descriptions.Item>
          </Descriptions>
          <Descriptions title="授权管理" layout="vertical" column={1} />
          {data.deptRoleRequests.map((item, index) => (
            <div
              key={index}
              style={{
                border: '1px solid #eee',
                padding: '20px 20px 0 20px',
                marginBottom: 20,
                backgroundColor: '#fbfbfb',
              }}
            >
              <Descriptions layout="horizontal" column={1}>
                <Descriptions.Item label="部门">{item.deptName}</Descriptions.Item>
                <Descriptions.Item label="角色">
                  {item.roleList.map((role) => role.roleName).join('、')}
                </Descriptions.Item>
              </Descriptions>
            </div>
          ))}
        </>
      ) : (
        <div style={{ display: 'flex', justifyContent: 'center', padding: '100px 0' }}>
          <Spin />
        </div>
      )}
    </Drawer>
  );
};
